<!-- tab组件: <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
<template>
	<view class="custom_tabbar" >
		<view class="tabbar_inner">
			<block v-for="(item, index) in tabs" :key="index">
				<view class="tabbar-item" @click="toIndex(item.path)">
					<view class="imageItem">
						<!-- <view class="dotClass" v-if="index == 3">
							<uv-badge type="error" max="99" :value="badgeValue"></uv-badge>
						</view> -->
						<image
							mode="scaleToFill"
							v-if="tabbarPath == item.path"
							:src="item.activeIcon" />
						<image mode="scaleToFill" v-else :src="item.inactiveIcon" />
					</view>
					<text
						class="font-title"
						:class="{ 'font-title-active': tabbarPath == item.path }">
						{{ item.title }}
					</text>
				</view>
			</block>
			<view v-if="false" class="mid-btn-arc"></view>
			<view v-if="false" class="mid-btn" @click="midButtonClick">
				<image class="mid-img" :src="tabs[2].icon"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
		getCurrentInstance,
		onBeforeUnmount,
		nextTick,
	} from 'vue'
	import { onShow, onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
	const tabs = ref([
		{
			inactiveIcon: 'http://121.224.76.39:8002/qingzhen/20250822/index_1755853771514.png',
			activeIcon:
				'http://121.224.76.39:8002/qingzhen/20250822/index_active_1755853785277.png',
			title: '首页',
			path: '/pages/home/index',
		},
		{
			inactiveIcon: 'http://121.224.76.39:8002/qingzhen/20250822/menu_1755853804703.png',
			activeIcon: 'http://121.224.76.39:8002/qingzhen/20250822/menu_active_1755853813432.png',
			title: '点餐',
			path: '/pages/home/menu',
		},
		{
			inactiveIcon: 'http://121.224.76.39:8002/qingzhen/20250822/order_1755853830124.png',
			activeIcon:
				'http://121.224.76.39:8002/qingzhen/20250822/order_active_1755853839760.png',
			title: '订单',
			path: '/pages/home/order',
		},
		{
			inactiveIcon: 'http://121.224.76.39:8002/qingzhen/20250822/mine_1755853853521.png',
			activeIcon: 'http://121.224.76.39:8002/qingzhen/20250822/mine_active_1755853861929.png',
			title: '我的',
			path: '/pages/home/mine',
		},
	])
	const badgeValue = ref()
	const props = defineProps({
		tabbarPath: {
			type: String,
			default: '/pages/home/index',
		},
	})
	import { useMainStore } from '@/store/store'
	const { proxy } = getCurrentInstance()
	const baseStore = useMainStore()
	// function getTabbarHeight() {
	// 	return new Promise(resolve => {
	// 		// const page = getCurrentPages().slice(-1)[0]
	// 		uni.createSelectorQuery()
	// 			.in(proxy)
	// 			.select(`.custom_tabbar`)
	// 			.fields({ size: true }, data => {
	// 				console.log(data, '我得tabbar高度')
	// 				if (data) {
	// 					resolve(data.height)
	// 				} else {
	// 					resolve(0) // 没取到就默认 0
	// 				}
	// 			})
	// 			.exec()
	// 	})
	// }
	const getCustomTabbarHeight = () => {
		nextTick(async () => {
			// let height = await getTabbarHeight()
			// baseStore.setCustomTabbarHeight(safeBottom.value + tabbarHeight.value)
		})
	}
	const tabbarHeight = ref(50)
	onLoad(() => {
		// getCustomTabbarHeight()
		uni.getSystemInfo({
			success: function (res) {
				console.log(res) // 输出安全区域信息
				const safeBottom22 = res.screenHeight - res.safeArea.bottom // 计算底部安全区域高度
				console.log('底部安全区域高度:', safeBottom22)
				console.log('tabbar总高度:', safeBottom22 + tabbarHeight.value)
				baseStore.setCustomTabbarHeight(safeBottom22 + tabbarHeight.value)
			},
		})
	})
	const toIndex = path => {
		uni.switchTab({
			url: path,
		})
	}
</script>

<style lang="scss" scoped>
	.custom_tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
		height: calc(50px + env(safe-area-inset-bottom) / 2);
		height: calc(50px + env(safe-area-inset-bottom) );
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom));
	}
	.tabbar_inner {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.tabbar-item {
		flex: 1;
		height: 100%;

		background-color: #fff;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: transform 0.3s;
		.imageItem {
			margin-top: 16rpx;
			width: 40rpx;
			height: 40rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.dotClass {
				position: absolute;
				right: -30rpx;
				top: -10rpx;
			}
		}
	}

	.font-title {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #777777;
		z-index: 100;
	}
	.font-title-active {
		color: $qingzhen-btn-primary-color;
		color: #000;
	}
	.mid-btn-arc {
		position: absolute;
		top: -22px;
		left: calc(50% - 26px);
		background-color: #ddd;
		border-radius: 50%;
		height: 54px;
		width: 52px;
		// border: 1px solid red;
	}

	.mid-btn {
		position: absolute;
		height: 50px;
		width: 50px;
		left: 50%;
		top: -21px;
		transform: translateX(-25px);
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		.mid-img {
			width: 40px;
			height: 40px;
		}
	}
</style>
